<template>
	<up-tabbar
		:value="curTab"
		@change="handleChange"
		:placeholder="false"
		:safeAreaInsetBottom="false"
	>
		<up-tabbar-item name="/pages/index/index" text="首页" icon="home"></up-tabbar-item>
		<up-tabbar-item name="/moduleA/houselist/houselist" text="攻略">
			<template #active-icon>
				<img class="tab-icon" src="/static/gl-active.png" alt="" />
			</template>
			<template #inactive-icon>
				<img class="tab-icon" src="/static/gl.png" alt="" />
			</template>
		</up-tabbar-item>
		<up-tabbar-item name="/pages/map/map" text="消息" icon="chat-fill"></up-tabbar-item>
		<up-tabbar-item name="/pages/my/my" text="我的" icon="account"></up-tabbar-item>
	</up-tabbar>
</template>

<script setup>
import { ref } from 'vue';
	// 组件value属性值对应tab-item 的name属性，对应那个tab-item的name则这个tab-item高亮
	const curTab = ref('a')
	// 获取到当前页面对应的tab-item的name属性值，然后把curTab的值改成对应的name属性值，这个页面对应tab就会高亮
	
	// 获取到当前页面的路径，把curTab的值改成当前页面的路径
	const pages = getCurrentPages()
	const curPage = pages[pages.length - 1]
	// 当前页面路径
	const curPagePath = curPage.route
	curTab.value = '/' + curPagePath
	console.log(curPagePath)
	
	// 
	const handleChange = (index) => {
		console.log(index)
		uni.navigateTo({
			url: index
		})
	}
	
</script>

<style lang="scss" scoped>
	.tab-icon{
		width: 45rpx;
		height: 45rpx;
	}
</style>